<template>
  <view class="coupon-item">
    <m-title :item="item"></m-title>
    <!-- <m-option :item="item" @change="handleChangeInput"></m-option> -->
    <view class="coupon-item-list" v-if="item.type === 'option'">
      <view class="coupon-item-list-title">{{ item.title }}</view>
      <view
        class="uni-input"
        v-if="item.num !== 1"
        @tap="isShow=true"
      >{{ item.val }}</view>
      <view class="uni-list-cell-db" v-if="item.num === 1">
        <picker @change="bindPickerChange" :value="index" :range="pickList">
          <view class="uni-input">{{ pickList[index] }}</view>
        </picker>
      </view>
    </view>
    <view class="coupon-item-list input" v-if="item.type === 'input'">
      <view class="coupon-item-list-title">{{ item.title }}</view>
      <input
        type="text"
        :value="item.val"
        :placeholder="item.placeholder"
        @input="handleChangeInput"
      />
    </view>
    <view class="coupon-item-list num input" v-if="item.type === 'num'">
      <view class="coupon-item-list-title">{{ item.title }}</view>
      <view class="num-right">
        <input type="number" :value="item.val" @input="handleChangeInput" />
        <text>{{ item.unit }}</text>
      </view>
    </view>
    <view class="coupon-item-list date" v-if="item.type === 'date'">
      <view class="coupon-item-list-title">{{ item.title }}</view>
      <view>
        <radio-group @change="radioChange">
          <view class="date-right">
            <label
              class="uni-list-cell uni-list-cell-pd"
              v-for="(item, index) in radioItems"
              :key="item.value"
            >
              <view>
                <radio
                  style="transform:scale(0.7)"
                  :value="item.value"
                  :checked="index === current"
                  color="#0CD4D3"
                />
              </view>
              <view>{{ item.name }}</view>
            </label>
          </view>
        </radio-group>
      </view>
      <view class="date-bottom" v-if="current === 0">
        <view class="date-bottom-left-2">下单后有效时间</view>
        <view class="date-bottom-right-2">
          <input
            type="number"
            placeholder="请输入相对时间"
            @input="handleChangeInputDate"
          />天
        </view>
      </view>
      <view class="date-bottom" v-if="current === 1">
        <view class="date-bottom-left">
          <view class="pi-pd-left-36 pi-pd-right-46">
            <picker
              mode="date"
              :value="getStartDate"
              :start="startDate"
              :end="endDate"
              @change="bindDateChange"
            >
              <view class="uni-input">{{ getStartDate }}</view>
            </picker>
          </view>
          <view class="pi-pd-right-72">至</view>
          <view>
            <picker
              mode="date"
              :value="getEndDate"
              :start="getStartDate"
              :end="endDate"
              @change="bindEndDateChange"
            >
              <view class="uni-input">{{ getEndDate }}</view>
            </picker>
          </view>
        </view>
        <!-- <view class="date-bottom-right">删除</view> -->
      </view>
    </view>
    <view class="coupon-item-list photo" v-if="item.type === 'photo'">
      <view class="coupon-item-list-title">{{ item.title }}</view>
      <view class="photo-txt">
        <view>1:商品主图必须上传,图片像素至少为600*400,图片大小不超 过5M,建议图片比例16:9</view>
        <view class="pi-pd-top-12">2:不可发与产品不相关的图片内容</view>
      </view>
      <view class="coupon-item-list-title pi-pd-top-32">商品主图</view>
      <view class="photo-box">
        <view class="photo-box-img" @tap="handlerImg(1)">
          <image :src="basic + profilePhoto" v-if="profilePhoto" />
          <view style="font-size:100rpx" v-if="!profilePhoto">+</view>
        </view>
      </view>
      <view class="coupon-item-list-title pi-pd-top-32">服务次图</view>
      <view class="photo-box">
        <view class="photo-box-img" @tap="handlerImg(2)">
          <image :src="basic + detailPhotoOne" v-if="detailPhotoOne" />
          <view style="font-size:100rpx" v-if="!detailPhotoOne">+</view>
        </view>
        <view class="photo-box-img" @tap="handlerImg(3)">
          <image :src="basic + detailPhotoTwo" v-if="detailPhotoTwo" />
          <view style="font-size:100rpx" v-if="!detailPhotoTwo">+</view>
        </view>
      </view>
    </view>
    <view
      class="coupon-item-list textArea"
      v-if="item.type === 'textArea'"
      @tap="handleTxtArea"
    >
      <view class="coupon-item-list-title">{{ item.title }}</view>
      <view class="textArea-box">
        <textarea placeholder="请输入内容" :value="item.val" />
      </view>
    </view>

    <view class="coupon-item-list switch" v-if="item.type === 'switch'">
      <view class="coupon-item-list-title">{{ item.title }}</view>
      <switch @change="switch1Change" color="#0CD4D3" style="transform:scale(0.7)"/>
    </view>
    <pop :isShow="isShow">
      
    </pop>
  </view>
</template>

<script>
import pop from './pop'
import CONSTS from '@/src/consts'
import { cloneDeep } from 'lodash'
import mTitle from './title'
import mOption from './option'
export default {
  props: {
    item: {
      type: Object,
      default: () => { }
    }
  },
  components: {
    mTitle,
    mOption,
    pop
  },
  computed: {
    startDate () {
      return this.getDate('start')
    },
    endDate () {
      return this.getDate('end')
    }
  },
  data () {
    const currentDate = this.getDate({
      format: true
    })
    return {
      isShow: false,
      cloneltem: {},
      basic: CONSTS.BASE_URL + 'basic', //图片访问前缀路径
      profilePhoto: '', //头像图片
      detailPhotoOne: '',
      detailPhotoTwo: '',
      getEndDate: currentDate,
      getStartDate: currentDate,
      pickList: [],
      index: 0,
      radioItems: [
        {
          value: '1',
          name: '相对时间'
        },
        {
          value: '2',
          name: '指定时间',
          checked: 'true'
        }
      ],
      current: 0
    }
  },
  watch: {
    item: {
      handler (val) {
        this.cloneItem = cloneDeep(this.item)
        const word = this.cloneItem.showKeyWord
        this.pickList = this.item.option.map(v => v[word])
      },
      deep: true
    }
  },
  mounted () {
    // this.cloneltem = cloneDeep(this.item)
  },
  methods: {
	switch1Change(e){
		console.log(e)
	},
    handleTxtArea () {
      this.$utils.common.navigateTo('src/pages/coupon/pages/textare/index')
    },
    radioChange (evt) {
      for (let i = 0; i < this.radioItems.length; i++) {
        if (this.radioItems[i].value === evt.target.value) {
          this.current = i
          break
        }
      }
      let jsonData = {}
      jsonData[this.item.key.typeKey] = this.current + 1
      this.$emit('change', jsonData)
    },
    bindPickerChange: function (e) {
      console.log('picker发送选择改变，携带值为', e.target.value)
      this.index = e.target.value
      let jsonData = {}
      jsonData[this.item.key] = this.item.option[this.index].managementId
      this.$emit('change', jsonData)
    },
    handleChangeInputDate (e) {
      const inputValue = event.target.value
      let jsonData = {}
      jsonData[this.item.key.keyword[0]] = inputValue
      this.$emit('change', jsonData)
    },
    handleChangeInput (event) {
      const inputValue = event.target.value
      let jsonData = {}
      jsonData[this.item.key] = inputValue
      this.$emit('change', jsonData)
    },
    handlerImg (type) {
      const _self = this
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'],
        sourceType: ['album'],
        success: function (res) {
          const tempFilePaths = res.tempFilePaths
          uni.uploadFile({
            url: CONSTS.BASE_URL + '/basic/upload/single/store',
            // url: 'https://zhangmugui1.utools.club/api/v2/basic/upload/single/store',
            filePath: tempFilePaths[0],
            name: 'file',
            formData: {
              user: 'test'
            },
            success: uploadFileRes => {
              const res = JSON.parse(uploadFileRes.data)
              let jsonData = {
                type: type,
                url: ''
              }
              switch (type) {
                case 1:
                  _self.profilePhoto = res.data
                  jsonData.url = _self.profilePhoto
                  _self.$emit('photoChange', jsonData)
                  break
                case 2:
                  _self.detailPhotoOne = res.data
                  jsonData.url = _self.detailPhotoOne
                  _self.$emit('photoChange', jsonData)
                  break
                case 3:
                  _self.detailPhotoTwo = res.data
                  jsonData.url = _self.detailPhotoTwo
                  _self.$emit('photoChange', jsonData)
                  break
              }
            }
          })
        }
      })
    },
    bindEndDateChange (e) {
      this.getEndDate = e.target.value
      let jsonData = {}
      jsonData[this.item.key.keyword[1]] = this.getEndDate
      this.$emit('change', jsonData)
    },
    bindDateChange (e) {
      this.getStartDate = e.target.value
      let jsonData = {}
      jsonData[this.item.key.keyword[2]] = this.getStartDate
      this.$emit('change', jsonData)
    },
    getDate (type) {
      const date = new Date()
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()

      if (type === 'start') {
        year = year - 60
      } else if (type === 'end') {
        year = year + 2
      }
      month = month > 9 ? month : '0' + month
      day = day > 9 ? day : '0' + day
      return `${year}-${month}-${day}`
    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/pages/coupon/components.scss";
</style>
